import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

/// 多選小圖示widget
class MultiSelectionWidget extends StatelessWidget {
  final ValueNotifier<bool> multiSelectionMode;
  final bool imageSelected;
  final List<File> multiSelectedImage;
  final int maximumSelection;
  const MultiSelectionWidget({
    Key? key,
    required this.imageSelected,
    required this.multiSelectedImage,
    required this.multiSelectionMode,
    required this.maximumSelection,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    //print('multiSelectedImage.length=${multiSelectedImage.length}');
    //print('maximumSelection=$maximumSelection');
    return ValueListenableBuilder(
      valueListenable: multiSelectionMode,
      builder: (context, bool multiSelectionModeValue, child) => Visibility(
        visible: multiSelectionModeValue,
        child: Align(
          alignment: Alignment.topRight,
          child: Padding(
            padding: EdgeInsets.zero,
            child: Container(
              //height: 25,
              //width: 25,
              child: imageSelected
                  ? blurContainer()
                  : multiSelectedImage.length < maximumSelection
                      ? normalContainer()
                      : disableContainer(),
            ),
          ),
        ),
      ),
    );
  }

  // 已選
  Widget blurContainer() {
    return IgnorePointer(
      ignoring: true,
      child: Container(
        width: double.infinity,
        color: const Color(0x88333333),
        height: double.maxFinite,
        child: ClipRRect(
          borderRadius: BorderRadius.circular(4.0),
          child: SvgPicture.asset(
              // 'packages/image_picker_plus_nic/assets/selecting.svg',
              'packages/image_picker_plus_nic/assets/selecting-primary.svg',
              fit: BoxFit.scaleDown,
              width: 64,
              height: 64),
        ),
      ),
    );
  }

  //可選
  Widget normalContainer() {
    return IgnorePointer(ignoring: true, child: Container());
  }

  //不可選
  Widget disableContainer() {
    return IgnorePointer(
        ignoring: true, child: Container(color: const Color(0x88FFFFFF)));
  }
}
